<template>
  <div>
    <template v-for="item in children">
      <div v-if="level < 2" :key="item.id" class="wrapper">
        <div class="left">
             <el-tag  type="success" closable @close="$emit('close',item)">
        {{ item.authName }}
      </el-tag>
        </div>
        <div class="right">
          <Tags
            v-on="$listeners"
            v-if="item.children"
            :children="item.children"
            :level="level + 1"
          />
        </div>
      </div>
      <el-tag class="tagg" type="danger" closable @close="$emit('close',item)"  v-else :key="item.id">
        {{ item.authName }}
      </el-tag>
    </template>
  </div>
</template>

<script>
export default {
  name: "Tags",
  props: {
    /**
     * 要渲染的数据
     */
    children: Array,
    /**
     * 层级
     */
    level: {
      type: Number,
      default: 0,
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  display: flex;
  margin-left: 20px;
  border: 1px solid #eee;
  .left {
    padding: 20px;
    display: flex;
    align-items: center;
    text-align: center;
  }
  .right {
    flex: 1;
    display: flex;
    align-items: center;

  .tagg{
  margin-left: 20px;
  margin-top: 20px;

  }

  }
}
</style>